<template>
  <div class="gantt-view">
    <div ref="gantt" class="ganter-content" />
  </div>
</template>

<script>
import { gantt } from "dhtmlx-gantt"; // 依赖
import "dhtmlx-gantt/codebase/skins/dhtmlxgantt_terrace.css"; // 皮肤
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
import { projects_with_milestones } from "./mockData.tsx";

export default {
  name: "TreeTable",
  components: {},
  props: {},
  data() {
    return {
      // 甘特图数据
      tasksData: {
        data: [
          {
            id: 1,
            text: "Project #1",
            start_date: "2023-09-01",
            duration: 30,
            type: 1, // 1 代表任务类型
            parentId: null,
            children: [
              {
                id: 2,
                text: "Task #1.1",
                start_date: "2023-09-01",
                duration: 10,
                type: 2, // 2 代表子任务类型
                parentId: 1,
                children: [],
              },
              {
                id: 3,
                text: "Task #1.2",
                start_date: "2023-09-12",
                duration: 15,
                type: 2,
                parentId: 1,
                children: [],
              },
            ],
          },
          {
            id: 4,
            text: "Project #2",
            start_date: "2023-09-15",
            duration: 25,
            type: 1,
            parentId: null,
            children: [
              {
                id: 5,
                text: "Task #2.1",
                start_date: "2023-09-16",
                duration: 10,
                type: 2,
                parentId: 4,
                children: [],
              },
              {
                id: 6,
                text: "Task #2.2",
                start_date: "2023-09-20",
                duration: 12,
                type: 2,
                parentId: 4,
                children: [],
              },
            ],
          },
          {
            id: 7,
            text: "Milestone #1",
            start_date: "2023-09-30",
            duration: 0,
            type: 3, // 3 代表里程碑
            parentId: null,
            children: [],
          },
        ],
      },
      ganttInstanse: null,
    };
  },
  mounted() {
    // 确保 Gantt 加载完毕后再初始化
    if (typeof gantt !== "undefined") {
      this.initGunter();
    } else {
      console.error("Gantt is not defined");
    }
  },
  methods: {
    // 初始化甘特图
    initGunter() {
      // ★★★★将定义的方法绑定到gantt上
      // 注意：确保在调用 gantt.init(this.$refs.gantt) 之前绑定 clickGridButton 方法，以确保在渲染时方法已定义并可用。这样，点击图标时就会正确调用绑定的方法。
      gantt.clickGridButton = this.clickGridButton.bind(this);

      const colHeader =
        '<div class="gantt_grid_head_cell gantt_grid_head_add" onclick="gantt.createTask()"></div>';
      const colContent = (task) =>
        `<i class="fa gantt_button_grid gantt_grid_edit fa-pencil" onclick="this.clickGridButton(${task.id}, 'edit')"></i>` +
        `<i class="fa gantt_button_grid gantt_grid_add fa-plus" onclick="this.clickGridButton(${task.id}, 'add')"></i>` +
        `<i class="fa gantt_button_grid gantt_grid_delete fa-times" onclick="gantt.clickGridButton(${task.id}, 'delete')"></i>`;

      gantt.config.columns = [
        { name: "text", tree: true, width: "*", resize: true },
        { name: "start_date", align: "center", resize: true },
        { name: "duration", align: "center" },
        {
          name: "buttons",
          label: colHeader,
          width: 75,
          template: colContent,
        },
      ];

      // 初始化
      gantt.init(this.$refs.gantt);
      // 绘制甘特图
      gantt.parse(this.tasksData);
    },

    test() {
      console.log(" 点击了  test");
    },
    createTaskTest() {
      console.log(" 点击了  createTaskTest");
      // gantt.createTask()
    },

    clickGridButton(id, action) {
      switch (action) {
        case "edit":
          gantt.showLightbox(id);
          break;
        case "add":
          gantt.createTask(null, id);
          break;
        case "delete":
          gantt.confirm({
            title: gantt.locale.labels.confirm_deleting_title,
            text: gantt.locale.labels.confirm_deleting,
            callback: function (res) {
              if (res) {
                gantt.deleteTask(id);
              }
            },
          });
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.gantt-view {
  position: relative;
  height: 500px;
  width: 100%;
  .ganter-content {
    height: 400px;
    ::v-deep {
      .gantt_tree_content {
        .fa {
          cursor: pointer;
          font-size: 14px;
          text-align: center;
          opacity: 0.2;
          padding: 5px;
        }

        .fa:hover {
          opacity: 1;
        }

        .fa-pencil {
          color: #ffa011;
        }

        .fa-plus {
          color: #328ea0;
        }

        .fa-times {
          color: red;
        }
      }
    }
  }
}
</style>
